<template>
  <div class="roleView detailView">
    <Modal v-model="isView" :mask-closable="false" title="分配权限" :footer-hide="true">
      <div class="detailView">
        <div class="detail"><div class="name">角色名称</div><div class="value">{{item.name}}</div></div>
        <div class="detail"><div class="name">描述</div><div class="value">{{item.remark}}</div></div>
      </div>
      <div class="rTitle">分配权限</div>
      <Tree :data="menuTree" show-checkbox multiple
            ref="tree" @on-select-change="handleChange"></Tree>
      <div class="operationView">
        <Button type="primary" class="operation_btn" @click="handleCancle">取消</Button>
        <Button type="primary" class="operation_btn" @click="handleSave">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "roleView",
    data() {
      return {
        isView: false,
        item: {
          id: 0,
          name: '',
          remark: ''
        },
        roleMenuArr: [],
        menuTree: [],
        rules: {
          name: [
            {required: true, message: '请输入角色名称', trigger: 'blur' }
          ],
          remark: [
            {required: true, message: '请输入角色描述', trigger: 'blur' }
          ]
        },
        selectMenu: []
      }
    },
    methods: {
      handleSave() {
        this.selectMenu = this.$refs.tree.getCheckedAndIndeterminateNodes();
        if (this.selectMenu.length>0) {
          let tmp = []
          this.selectMenu.forEach((obj) => {
            tmp.push(obj.id)
          })
          this.ajax({
            type: this.api.setRoleMenu.type,
            url: this.api.setRoleMenu.url,
            data: {
              id: this.item.id,
              jsonData: tmp
            },
            success: (data) => {
              this.$Message.success('保存成功！');
              this.isView = false
              this.$emit('getList')
            },
            error: (data) => {
              this.$Message.error(data.message);
            }
          })
        } else {
          this.$Modal.warning({
            title: '提示',
            content: '请分配权限！'
          });
        }

      },
      handleChange(arr, menu) {
        // menu.checked = !menu.checked
        // if (menu.children&&menu.children.length) {
        //   menu.children.forEach((item) => {
        //     item.checked = menu.checked
        //   })
        // }
      },
      openView(row) {
        this.isView = true
        if (row) {
          this.item.id = row.id
          this.item.name = row.name
          this.item.remark = row.remark
        }
        this._getAllMenu()
      },
      _getRoleMenu(menuTree) {
        this.ajax({
          type: this.api.getRoleMenu.type,
          url: this.api.getRoleMenu.url,
          data: {
            id: this.item.id
          },
          success: (data) => {
            this.roleMenuArr = this._getdisplayMenu(data.object)
            this.menuTree = this._getSelectMenu(menuTree,this.roleMenuArr)
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      _getSelectMenu(menuTree, roleMenuArr) {
        selectMenu(menuTree)
        function selectMenu(menuTree) {
          menuTree.forEach((menu) => {
            roleMenuArr.forEach((roleMenu) => {
              if (menu.id == roleMenu) {
                menu.checked = true
                return
              }
            })
            if (menu.children&&menu.children.length) {
              selectMenu(menu.children)
            }
          })
        }
        return menuTree
      },
      _getdisplayMenu(dataTree) {
        let tmp = []
        if (dataTree.length) {
          displaytree(dataTree)
        }
        function displaytree(data) {
          if(data&&data.length){
            data.forEach((item) => {
              if (!item.children) {
                tmp.push(item.id)
              }
              if (item.children&&item.children.length) {
                displaytree(item.children)
              }
            })
          }
        }
        return tmp
      },
      _getAllMenu(){
        this.ajax({
          type: this.api.menuList.type,
          url: this.api.menuList.url,
          data: {},
          success: (data) => {
            data = JSON.stringify(data.object)
            data = data.replace(/text/g,'title')
            data = JSON.parse(data)
            if(this.item.id) {
              this._getRoleMenu(data)
            } else {
              this.menuTree = data
            }
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      handleCancle(){
        this.isView = false
      }
    },
    components: {}
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .roleView {
  }
  .rTitle{
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
  }
  .ivu-tree-title-selected, .ivu-tree-title-selected:hover{
    background: #fff;
  }
</style>
